@for $i from 1 through 5
{
    .m-#{$i}{margin: (10px * $i);}
    .mx-#{$i}{margin-left: (10px * $i); margin-right: (10px * $i);}
    .my-#{$i}{margin-top: (10px * $i);margin-bottom: (10px * $i);}
    
    .mt-#{$i} { margin-top: ($i*10px); }
    .mb-#{$i} { margin-bottom: ($i*10px); }
    .ml-#{$i} { margin-left: ($i*10px); }
    .mr-#{$i} { margin-right: ($i*10px); }
    

    .p-#{$i}{padding: (10px * $i);}
    .px-#{$i}{padding-left: (10px * $i);padding-right: (10px * $i);}
    .py-#{$i}{padding-top: (10px * $i);padding-bottom: (10px * $i);}
    .pt-#{$i} { padding-top: ($i*10px); }
    .pb-#{$i} { padding-bottom: ($i*10px); }
    .pl-#{$i} { padding-left: ($i*10px); }
    .pr-#{$i} { padding-right: ($i*10px); }


}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.m-auto{
    margin:auto
}